var context = document.getElementById('canvas').getContext('2d');

// Functions..........................................................

function drawGrid(context, color, stepx, stepy) {
    context.save();

    context.strokeStyle = color;
    context.lineWidth = 0.5;

    for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
        context.beginPath();
        context.moveTo(i, 0);
        context.lineTo(i, context.canvas.height);
        context.stroke();
        context.closePath();
    }
    for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
        context.beginPath();
        context.moveTo(0, i);
        context.lineTo(context.canvas.width, i);
        context.stroke();
        context.closePath();
    }
    context.restore();
}

// Initialization.....................................................



function drawTwoArcs(){
    context.beginPath();
    context.arc(300,190,150,0,Math.PI * 2, false);//outer:ccw

    context.arc(300,190,100,0,Math.PI*2, true); //Inner:CW

    context.fill();

}

function draw(){
    context.clearRect(0,0,context.canvas.width, context.canvas.height);

    context.fillStyle = 'rgba(100,140,230,0.5)';
    context.strokeStyle = context.fillStyle;

    drawGrid(context, 'lightgray', 10, 10);

    context.save();

    context.shadowColor='rgba(0,0,0,0.8)';
    context.shadowOffsetX = 12;
    context.shadowOffsetY = 12;
    context.shadowBlur = 15;
    drawTwoArcs();

}


draw();